/* eslint-disable */ 
import '../styles/components/footer.scss'

import React, { Fragment } from "react"
import { Link } from "gatsby"
import { Row, Col } from 'antd'

import { FormattedMessage } from 'react-intl'

import { allToolsMenu } from '../utils/menu_config'

const Footer = ({ pageContext }) => {
  const { lang } = pageContext || {}
  const allMenu = allToolsMenu.filter(item => !item.footerDisbled)

  // 拆分菜单
  const databaseMenu  = allMenu.filter(item => item.key === 'database')
  const otherMenu  = allMenu.filter(item => item.key !== 'database')

  // 产品菜单
  const ProductMenu = () => {
    return (
      <Col span={24} md={12}>
        {otherMenu.map((item, idx) => 
          <Fragment key={idx}>
            <div className={`type-title ${idx === 1 ? 'set-top' : ''}`}>{item[lang]}</div>
            {item.menu.map((m, i) => (
              <div className={`product-box ${item.key} ${m.disabled ? 'disabled' : ''}`} key={i}>
                <div className="title-box">
                  <div className={`${m.value} ${m.disabled ? 'disabled' : ''} w-product-icon-mini `}></div>
                  {m.value === 'parameter' ? <a href={`${m.link}&lang=${lang}`} rel="noreferrer" className="title" target="_blank">{m[lang]}</a> : <Link to={`/${lang}/${m.value}/`} className="title">{m.label}</Link>}
                </div>
                {m.value !== 'parameter' && <div className="desc">{m[lang]}</div>}
              </div>
            ))}
          </Fragment>)}
      </Col>
    )
  }
  return (
    <footer className="footer-container">
      <Row gutter={24}>
        <Col span={24} md={12}>
          {/* <div className="type-title"><FormattedMessage id="header.database"/></div> */}
          
          {databaseMenu.map((item, idx) => 
            <Fragment key={idx}>
              <div className="type-title">{item[lang]}</div>
              {item.menu.map((m, i) => (
                <div className={`product-box ${item.key} ${m.disabled ? 'disabled' : ''}`} key={i}>
                  <div className="title-box">
                    <div className={`${m.value} ${m.disabled ? 'disabled' : ''} w-product-icon-mini `}></div>
                    <Link to={`/${lang}/${m.value}/`} className="title">{m.label}</Link>
                  </div>
                  <div className="desc">{m[lang]}</div>
                </div>
              ))}
            </Fragment>)
          }

          <div className="type-title set-top"><FormattedMessage id="footer.about" /></div>
          <a className="abort-item" href="https://enmotech.com/" target="_blank" rel="noreferrer"><FormattedMessage id="footer.company" /></a>
          <a className="abort-item" href="https://www.modb.pro/mogdb" target="_blank" rel="noreferrer"><FormattedMessage id="footer.community" /></a>
          <br/>
          <a className="abort-item" href="https://mogdb.io" target="_blank" rel="noreferrer">MogDB</a>
          <a className="abort-item" href="https://mogdb.io/contact" target="_blank" rel="noreferrer"><FormattedMessage id="footer.contactUs" /></a>
        </Col>
        {ProductMenu()}
      </Row>
      <div className="copyright">Copyright © 2009-2022 www.enmotech.com All rights reserved.</div>
    </footer>
  )
}

export default Footer